<template>
	<view class="label">  
		<view  class="label-box">
			<view class="label-header">
				<view class="label-title">我的标签</view>
				<view class="label-edit" :style="{color:is_edit?'red':''}"  @click="editLabel">{{is_edit?'完成':'编辑'}}</view>
			</view>
			<view class="label-content" >
				<view class="label-content-item" v-for="(item,index) in label_item_true" :key="item._id">{{item.name}}
				 <uni-icons v-if="is_edit" class="icons-close" size="20" color="red" type="clear" @click="delItem(index)"></uni-icons>				
				</view>
			</view>
			<view v-if="label_item_true.length===0" class="no_date">
				{{no_date}}
			</view>
		</view>
		<view  class="label-box">
			<view class="label-header">
				<view class="label-title">推荐标签</view> 
			</view>
			<view class="label-content"  >
				<view class="label-content-item" v-for="(item,index) in label_item_false" :key="item._id" @click="addItem(index)">{{item.name}}</view>
			</view>
			<view v-if="label_item_false.length===0" class="no_date">
				{{no_date}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_edit:false,
				label_item_true:[],
				label_item_false:[],
				no_date:''
			}
		},
		onLoad() {
			this.get_label()
		},
		methods: {
			//编辑--完成
			editLabel(){
				if(this.is_edit){
					this.is_edit=false
					this.update_label(this.label_item_true)					
				}else{
					this.is_edit=true
				}
				
			},
			//添加推荐标签
			addItem(index){
				//编辑状态才可以添加
				if(this.is_edit) {
				this.label_item_true.push(this.label_item_false[index])
				this.label_item_false.splice(index,1)
				}
				
			},
			//删除我的标签
			delItem(index){
				this.label_item_false.push(this.label_item_true[index])
				this.label_item_true.splice(index,1)
			},
			//更新标签
			update_label(label){
				//遍历label的_id到数组中newlabel中
				let newlabel=[]
				label.forEach((item)=>{
					newlabel.push(item._id)
				})
				uni.showLoading()
				this.$api.update_label({
					label:newlabel
				}).then((res)=>{
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					//自定义事件
					uni.$emit('labelChange')
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			//查询所有标签
			get_label(){
				//this.no_date=''
				uni.showLoading({
					title:"加载中"
				})
				this.$api.get_label({
					type:"all"
				}).then(
				(res)=>{
					uni.hideLoading()
					const{data}=res
					this.label_item_true=data.filter(c=>c.current)
					this.label_item_false=data.filter(c=>!c.current)
					this.no_date='没有更多数据'
				}).catch(()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
.label{
	.label-box{
		background-color: #fff;
		margin-bottom: 10px;
		.label-header{
			display: flex;
			justify-content: space-between;  //使内容左右对齐
			font-size: 14px;
			color: #666;
			padding: 10px 15px;
			border-bottom: 1px #f5f5f5 solid;
			.label-edit{
				color: #30b33a;
				font-weight: bold;
			} 
		}
		.label-content{
			display: flex;
			flex-wrap: wrap;
			padding: 15px;
			padding-top: 0;
			.label-content-item{
				position:relative;
				padding: 2px 5px;
				margin-top: 12px;
				margin-right: 10px;
				align-items: center;
				font-size: 14px;
				color: #666;
				border: 1px #666 solid;
				border-radius: 5px;
				.icons-close{
					position:absolute;
					top:-8px;
					right: -8px;
					border-radius: 50%;
					
				}
			}
		}
		.no_date{
			width: 100%;
			text-align: center;
			padding: 25px 0px;
			font-size: 14px;
			color: #999;
		}
	}
	
	 
}
</style>
